import { PageContainer } from '@ant-design/pro-layout';
import type { ProColumns } from '@ant-design/pro-table';
import ProTable from '@ant-design/pro-table';
import { Badge, Card, Descriptions, Divider } from 'antd';
import type { FC } from 'react';
import React from 'react';
import { useRequest } from 'umi';
import * as qs from 'qs'
import { useLocation } from 'react-router';
import type { BasicGood, BasicProgress } from './data.d';
import { queryBasicProfile } from './service';
import styles from './style.less';

var lastTimeVisit = 0;

const Basic: FC = () => {
  const searchParams = qs.parse(useLocation().search, { ignoreQueryPrefix: true });
  console.log(searchParams["id"]);
  const { data, loading } = useRequest(() => {
    return queryBasicProfile({"id": Number(searchParams["id"]? searchParams["id"] : lastTimeVisit)});
  });

  console.log(data);

  const news_for_show = data?.news || {
    time: "2022-05-26",
    category: "default",
    source: "Holocene",
    url: "http://localhost:8000",
    href: "/",
    id: "-1",
    title: "Welcome to holocene web search engine!",
    content:"Please use search engine to browse for news."
  };
  
  lastTimeVisit = data? data.news.id: lastTimeVisit;
  console.log(lastTimeVisit);

  return (
    <PageContainer>
      <Card bordered={false}>
        <Descriptions title={news_for_show.title} style={{ marginBottom: 32 }} bordered>
          <Descriptions.Item label="Category">{news_for_show.category}</Descriptions.Item>
          <Descriptions.Item label="Source">{news_for_show.source}</Descriptions.Item>
          <Descriptions.Item label="ID">{news_for_show.id}</Descriptions.Item>
          <Descriptions.Item label="URL">{news_for_show.url}</Descriptions.Item>
        </Descriptions>
        <Divider style={{ marginBottom: 32 }} />
        <Descriptions title="Full Content" style={{ marginBottom: 32 }} bordered>
          <Descriptions.Item label="Passage">{news_for_show.content}</Descriptions.Item>
        </Descriptions>
        <Descriptions title="Web Preview" style={{ marginBottom: 32 }} bordered>
          <Descriptions.Item label="Page">
            <iframe src={news_for_show.url} style={{minWidth: 1000, minHeight: 1000}} />
          </Descriptions.Item>
        </Descriptions>
      </Card>
    </PageContainer>
  );
};

export default Basic;
